<template>
	<view class="">
		<w-container isTabbar :isNavbar="false">
			<template>
				<view class="content">
					<view class="top_box">
						<image src="../../static/image/mine_bk.png" mode="widthFix"></image>
						<!-- <image class="top_box_logo" src="../../static/image/logo.png" mode="widthFix"></image> -->
						<view class="top_box_logo">
							我的
						</view>
					</view>
					<view class="center_box" style="">
						<view class="mine_box fr-ac">
							<view class="mine_box_header">
								<image src="../../static/image/icon2.png" mode="widthFix"></image>
							</view>
							<view class="ml-20">
								<view class="">
									{{user_info.nickname?user_info.nickname:''}}
								</view>
								<view class="">
									{{user_info.mobile?user_info.mobile:''}}
								</view>
							</view>
						</view>
						<view class="function_box_new">
							<view @click="pageJump('/pages/register/list')" class="function_item">
								<view class="fr-ac">
									<view class="icon-menu iconfont mr-20"></view>
									<view class="">
										登记列表
									</view>
								</view>
								<view class="icon-arrow-right-bold iconfont"></view>
							</view>
							
							<!-- <view @click="pageJump('/pages/order/my_aftersales')" class="function_item">
								<view class="fr-ac">
									<view class="icon-dingdan1 iconfont mr-20"></view>
									<view class="">
										我的售后
									</view>
								</view>
								<view class="icon-arrow-right-bold iconfont"></view>
							</view>
							
							<view @click="pageJump('/pages/login/protocol?diyname=aboutus')" class="function_item">
								<view class="fr-ac">
									<view class="icon-renxiaozhuanti iconfont mr-20"></view>
									<view class="">
										关于我们
									</view>
								</view>
								<view class="icon-arrow-right-bold iconfont"></view>
							</view> -->
							
							<view v-if="token" @click="exitLogin" class="function_item">
								<view class="fr-ac">
									<view class="icon-back iconfont mr-20"></view>
									<view class="">
										退出登录
									</view>
								</view>
								<view class="icon-arrow-right-bold iconfont"></view>
							</view>
						</view>
						<!-- <view class="function_box">
							<view class="function_box_title">
								我的功能
							</view>
							<view class="btn_list fr-ac-jsb">
								<view @click="pageJump('/pages/order/my_order')" class="btn_item fc-ac">
									<image src="../../static/image/icon6.png" mode="widthFix"></image>
									<view class="btn_item_name">
										我的订单
									</view>
								</view>
								<view @click="pageJump('/pages/order/my_aftersales')" class="btn_item fc-ac">
									<image src="../../static/image/icon1.png" mode="widthFix"></image>
									<view class="btn_item_name">
										我的售后
									</view>
								</view>
								<view @click="pageJump('/pages/login/protocol?diyname=aboutus')" class="btn_item fc-ac">
									<image src="../../static/image/icon7.png" mode="widthFix"></image>
									<view class="btn_item_name">
										关于我们
									</view>
								</view>
							</view>
						</view> -->
					</view>
				</view>
			</template>
		</w-container>
		<w-tabbar></w-tabbar>
	</view>
</template>

<script>
	import {isValue} from '@/utils/common.js'
	export default {
		data() {
			return {
				user_info : {},
				token:''
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token')
			// this.getUserCenter()
		},
		onShow() {
		},
		methods: {
			pageJump(url){
				uni.navigateTo({
					url
				})
			},
			async exitLogin(){
				const res = await this.$http({
					url: '/api/User/logout',
					data: {}
				})
				if(res.code == 1){
					uni.clearStorageSync()
					uni.reLaunch({
						url:'/pages/login/index'
					})
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
				
				
				
			},
			async getUserCenter() {
				const res = await this.$http({
					url: '/addons/shop/api.user/index',
					data: {}
				})
				if(res.code == 1){
					this.user_info = res.data.userInfo
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100%;
		
		.top_box{
			padding-top: 10rpx;
			z-index: 1;
			position: relative;
			width: 100%;
			
			image{
				width: 100%;
			}
			
			.top_box_logo{
				width: 25%;
				position: absolute;
				top: 100rpx;
				left: 80rpx;
				font-size: 52rpx;
				font-weight: bold;
				letter-spacing: 10rpx;
				color: #fff;
			}
		}
		
		.center_box{
			position: relative;
			z-index: 999;
			margin-top: -220rpx;
			
			.mine_box{
				width: 100%;
				box-sizing: border-box;
				padding: 30rpx 80rpx;
				
				
				.mine_box_header{
					width: 90rpx;
					height: 90rpx;
					image{
						width: 90rpx;
						height: 90rpx;
					}
				}
			}
			
			.function_box{
				border-radius: 50rpx 50rpx 50rpx 50rpx/ 30rpx 30rpx 30rpx 30rpx;
				width: calc( 100% - 40rpx ); 
				margin: 0 20rpx;
				box-sizing: border-box;
				padding: 30rpx 60rpx;
				background-color: rgb(248,248,248);
				
				.function_box_title{
					font-weight: bold;
					font-size: 32rpx;
					margin-bottom: 60rpx;
				}
				
				.btn_list{
					margin: 40rpx 0;
					
					.btn_item{
						width: 20%;
						
						image{
							width: 100%;
						}
						
						.btn_item_name{
							text-align: center;
						}
					}
					
				}
			}
			
			.function_box_new{
				border-radius: 20rpx;
				background-color: rgb(255,255,255);
				width: calc( 100% - 40rpx ); 
				margin: 0 20rpx;
				box-sizing: border-box;
				padding: 10rpx 0;
				box-shadow: 2rpx 2rpx 12rpx #eee;
				
				.function_item{
					box-sizing: border-box;
					padding: 35rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.iconfont{
						color: #888;
					}
					
				}
			}
		}
		
		
	}
</style>